import React from "react";
import styles from "./map.module.less";
import { NavBar} from "antd-mobile";
import { Link } from "react-router-dom"

// 导入封装好的NavHeader组件
import NavHeader from "../../components/NavHeader/NavHeader.js";

// 这里的window是避免ESlint报错。脚手架要求全局对象需要使用window来访问。
const BMap = window.BMap;
export default class Map extends React.Component {
  state = {
    houseList: [],
    showHousesList:false
  };
  renderNavBar = () => {
    return (
      /*NavBar导航栏组件：
        mode：主题色  icon:出现在最左边的图标占位符 onLeftClick：左侧图标的点击事件 rightContent:导航栏右边的内容
        */
      <NavBar
        mode="light"
        icon={<i className={"iconfont icon-back"} />}
        onLeftClick={() => this.props.history.go(-1)}
        rightContent={[]}
      >
        地图导航
      </NavBar>
    );
  };
  renderHousesList = () => {
    return (
      // 展示房源列表  默认隐藏  给最外层div添加styles.show即可展示
    <div className={[styles.houseList,this.state.showHousesList&&styles.show].join(" ")}>
      <div className={styles.titleWrap}>
        <h1 className={styles.listTitle}>房屋列表</h1>
        <Link className={styles.titleMore} to={"/home/list"}>更多房源</Link>
      </div>
      {/*  房源结构*/}

      <div className={styles.houseItems} >
        {this.state.houseList.map((item)=>{
          return (
            <div className={styles.house} key={item.houseCode}>
              <div className={styles.imgWrap}>
                <img className={styles.img} src={React.BASE_URL+item.houseImg} alt="" />
              </div>
              <div className={styles.content}>
                <h3 className={styles.title}>{item.title}</h3>
                <div className={styles.desc}>{item.desc}</div>
                <div>
                  {item.tags.map((tag,index)=>(
                    <span className={[styles.tag, styles[`tag${index+1}`]].join(" ")} key={tag}>{tag}</span>
                  ))
                  }
                </div>
                <div className={styles.price}>
                  <span className={styles.priceNum}>{item.price}</span>元/月
                </div>
              </div>
            </div>
          )
        })
        }
      </div>
    </div>
    )
  }

  initMap = () => {
    //获取当前定位城市
    const { value, label } = JSON.parse(localStorage.getItem("hkzf_city"));

    // 初始化地图
    // 创建地图实例
    const map = new window.BMap.Map("container");
    this.map = map;

    // 设置中心点坐标
    // const point = new BMap.Point(114.102,32.126);
    //创建地址解析器实例
    const myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async (point) => {
        // point是解析出的地址坐标信息
        if (point) {
          // 初始化地图，并设置展示级别
          map.centerAndZoom(point, 11);
          map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          // 添加控件
          const scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
          map.addControl(scaleCtrl);
          const navigationCtrl = new BMap.NavigationControl(); // 添加缩放控件
          map.addControl(navigationCtrl);
          const cityCtrl = new BMap.CityListControl(); // 添加城市列表控件
          map.addControl(cityCtrl);
          // map.addOverlay(
          //   new BMap.Marker(point, { title: "北京市海淀区上地10街" })
          // );

          this.renderOverlays(value);
        } else {
          alert("您选择的地址没有解析到结果！");
        }
      },
      label
    );
    // 给地图绑定移动事件，隐藏房源列表
    map.addEventListener("movestart", () => {
      this.setState(()=>({
        showHousesList : false
      }))
    })
    const myCity = new BMap.LocalCity();
    myCity.get((res) => {
      // const cityName = res.name; // 获取当前定位城市
    });
  };

  renderOverlays = async (id) => {
    const { data: res } = await React.$http.get("area/map", {
      params: {
        id,
      },
    });
    if (res.status !== 200) console.error("获取房源信息失败，请重试!");
    const { type, nextZoom } = this.getTypeAndZoom();
    res.body.map((item) => {
      // 创建覆盖物
      this.createOverlays(item, nextZoom, type);
    });
  };
  createOverlays = (data, zoom, type) => {
    if (type === "circle") {
      this.createCircle(data, zoom);
    } else if (type === "rect") {
      this.createRect(data);
    }
  };
  // 创建区、镇覆盖物
  createCircle = (data, zoom) => {
    // 获取房源经纬度
    const {
      coord: { longitude, latitude },
      label,
      count,
    } = data;
    // 添加文本覆盖物
    const opts = {
      position: new BMap.Point(longitude, latitude), // 指定文本标注所在的地理位置
      offset: new BMap.Size(-35, -35), // 设置文本偏移量
    };

    const text = new BMap.Label("文本信息", opts); // 创建文本标注对象
    // 将房源地区的id保存到遮盖物对象中
    text.id = data.value;

    text.setContent(`
    <div class="${styles.bubble}">
      <p class="${styles.name}">${label}</p>
      <p>${count}套</p>
    </div>
    `);
    text.setStyle({
      cursor: "pointer",
      border: "0px solid rgb(255,0,0)",
      padding: "0px",
      whiteSpace: "nowrap",
      fontsize: "12px",
      color: "rgb(255,255,255)",
      textAlign: "center",
    });
    text.addEventListener("click", (e) => {
      this.renderOverlays(text.id);
      // 放大地图，并将地图中心重设为点击的区域
      this.map.centerAndZoom(new BMap.Point(longitude, latitude), zoom);
      // 清除上一级覆盖物  如果直接执行百度地图JS文件会报错但不影响运行，延时执行可避免报错
      setTimeout(() => {
        this.map.clearOverlays();
      }, 0);
    });
    this.map.addOverlay(text); // 将创建好的文本标注添加为地图的覆盖物
  };
  // 创建小区覆盖物
  createRect = (data) => {
    // 获取房源经纬度
    const {
      coord: { longitude, latitude },
      label,
      count,
    } = data;
    // 添加文本覆盖物
    const opts = {
      position: new BMap.Point(longitude, latitude), // 指定文本标注所在的地理位置
      offset: new BMap.Size(-50, -28), // 设置文本偏移量
    };

    const text = new BMap.Label("文本信息", opts); // 创建文本标注对象
    // 将房源地区的id保存到遮盖物对象中
    text.id = data.value;

    text.setContent(`
    <div class="${styles.rect}">
  <span class="${styles.housename}">${label}</span>
  <span class="${styles.housenum}">${count}套</span>
  <i class="${styles.arrow}"></i>
</div>
    `);
    text.setStyle({
      cursor: "pointer",
      border: "0px solid rgb(255,0,0)",
      padding: "0px",
      whiteSpace: "nowrap",
      fontsize: "12px",
      color: "rgb(255,255,255)",
      textAlign: "center",
    });
    text.addEventListener("click", (e) => {
      this.getHousesList(text.id);
      // 获取被点击的事件源对象
      const target = e.changedTouches[0];
      // 不生效
      this.map.panBy( window.innerWidth / 2 - target.clientX , (window.innerHeight - 330 ) / 2 - target.clientY ) ;
    });
    this.map.addOverlay(text); // 将创建好的文本标注添加为地图的覆盖物
  };

  getTypeAndZoom() {
    // 调用地图的getZoom()方法，获取当前缩放级别
    const zoom = this.map.getZoom();
    let type = "",
      nextZoom = 0;
    if (zoom >= 10 && zoom < 12) {
      nextZoom = 13; // 下一级缩放级别
      type = "circle"; // 当前级别绘制圆形覆盖物
    } else if (zoom >= 12 && zoom < 14) {
      nextZoom = 15;
      type = "circle";
    } else if (zoom >= 14 && zoom < 16) {
      type = "rect";
    }
    return {
      type,
      nextZoom,
    };
  }
  getHousesList = async ( cityId) =>{
    const {data:res } = await React.$http.get("houses", {
      params : {
        cityId
      }
    })
    if ( res.status !== 200 ) console.error("获取当前房源列表失败，请重试!");
    this.setState(()=>({
      houseList : res.body.list,
      showHousesList:true
    }))
  }
  componentDidMount() {
    this.initMap();
  }

  render() {
    return (
      <div className={styles.map}>
        <NavHeader>地图找房</NavHeader>
        {/*地图容器*/}
        <div id="container" className={[styles.container,styles.containerClick].join(" ")}/>
      {/*  展示房源列表*/}
        {this.renderHousesList()}
      </div>
    );
  }
}
